<template>
  <div class="nobg">
    <a-spin :spinning="loading">
      <top-nav-bar :applyPageRoute="nowRouteTitle" @back="back"></top-nav-bar>
      <a-card :bordered="false" style="position:relative;">
        <a-button
          style="position:absolute;right:10px;top:10px;"
          v-if="infomation.can_delete==1"
          @click="del()"
        >删除作业</a-button>
        <div class="homeworkTitle">{{infomation.title_text||'--'}}</div>
        <div class="homeworkTime">{{infomation.deadline||'不限时间'}}</div>
        <div class="homeworkClassAndPublisher">
          <span class="classInfo">
            <span class="icon_">
              <img src="~@/assets/icons/classIcon.png" alt />
            </span>
            <span class="text_">{{infomation.class_name||'--'}}</span>
          </span>
          <span class="publisher">
            <span>
              <a-icon :component="inportantUser" style="font-size:16px;color:#ccc"></a-icon>
            </span>
            <span class="text_">{{infomation.teacher_name||'--'}}</span>
          </span>
        </div>
        <div class="homeworkContent">
          <div class="text_content">
            <div v-for="(item,index) in infomation.content" v-if="item.type=='text'" :key="index">
              <div class="homeworkContentText" v-html="item.content"></div>
            </div>
          </div>
          <div class="pic_video">
            <div
              v-for="(item,index) in infomation.content"
              :key="index"
              v-if="item.type!=='text'"
              class="homeworkContent_picture_video"
            >
              <img
                v-if="item.type=='picture'"
                :src="item.content"
                alt
                @click="showImg(infomation.content,index)"
              />
              <video v-else-if="item.type=='video'" :src="item.content" controls>你的浏览器暂不支持vedio标签</video>
            </div>
          </div>
        </div>
      </a-card>
      <a-card :bordered="false" style="margin-top:10px;">
        <a-radio-group default-value="a" v-model="tabName" @change="changeTab" button-style="solid">
          <a-radio-button value="a">已提交</a-radio-button>
          <a-radio-button value="b">
            未提交
            <span>({{studentData.length}})</span>
          </a-radio-button>
        </a-radio-group>
        <div v-if="tabName=='a'">
          <div v-if="comments">
            <div v-for="(item,index) in comments" :key="index" class="comments">
              <div class="studentInfo" v-if="item.student">
                <div class="left">
                  <img
                    :src="item.student.head_portrait.url"
                    alt
                    v-if="item.student.head_portrait&&item.student.head_portrait.url"
                  />
                  <img src="~@/assets/touxiang.svg" alt v-else />
                </div>
                <div class="right">
                  <div>
                    <span v-if="item.student.name">{{item.student.name||'--'}}</span>
                    <span v-else>--</span>
                  </div>
                  <div>{{item.created_at}}</div>
                </div>
              </div>
              <div class="content">
                <div class="pic_video">
                  <div class="text_content">
                    <div v-for="(val,k) in item.content" v-if="val.type=='text'" :key="k">
                      <div class="homeworkContentText">{{val.content}}</div>
                    </div>
                  </div>
                  <div class="pic_video">
                    <div
                      v-for="(val,k) in item.content"
                      :key="k"
                      v-if="val.type!=='text'"
                      class="_picture_video"
                    >
                      <img
                        v-if="val.type=='picture'"
                        @click="showImg(item.content,k)"
                        :src="val.content"
                        alt
                      />
                      <video
                        v-else-if="val.type=='video'"
                        :src="val.content"
                        controls
                      >你的浏览器暂不支持vedio标签</video>
                    </div>
                  </div>
                </div>
              </div>
              <div class="teacherComments">
                <ul
                  style="list-style-type:none;padding-left:10px;"
                  v-if="item.interaction&&item.interaction.length>0"
                >
                  <li style="list-style-type:none" v-for="(val,k) in item.interaction" :key="k">
                    <div class="commentsInfo" v-if="val.from">
                      <div class="publisher">
                        <div class="left">
                          <img
                            :src="val.from.avatar.url"
                            alt
                            v-if="val.from.avatar&&val.from.avatar.url"
                          />
                          <img src="~@/assets/touxiang.svg" alt v-else />
                        </div>
                        <div class="right">
                          <div>
                            <span>{{val.from.name||'--'}}</span>
                          </div>
                          <div>
                            {{val.created_at}}
                            <span style="padding:0 5px;">
                              <a-popconfirm
                                title="确认删除吗？"
                                ok-text="确定"
                                cancel-text="取消"
                                v-if="val.is_mine==1"
                                @confirm="delComment(val.id)"
                                :overlayStyle="{padding:'20px'}"
                              >
                                <a>删除</a>
                              </a-popconfirm>
                              <a v-else @click="replyComment(index,val.from)">回复</a>
                            </span>
                          </div>
                        </div>
                      </div>
                      <div class="content">
                        <span v-if="val.to instanceof Array"></span>
                        <span v-else>
                          回复
                          <span style="color:#13c2c2;margin:0 5px;">{{val.to.name}}</span>：
                        </span>
                        <span style="color: #999;">{{val.comment}}</span>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="publishComments">
                  <a-textarea
                    :placeholder="item.commentInfo?'回复  '+item.commentInfo.name+'  (200字内)':'请输入评语，200字内'"
                    :maxLength="200"
                    :autoSize="{
                    minRows:2,
                    maxRows:6
                  }"
                    v-model="item.reply.comment"
                  />
                  <a-button
                    type="primary"
                    size="small"
                    style="margin-top:10px;margin-right:10px;"
                    @click="item.commentInfo?addReply(item.commentInfo,item.reply.comment,item.id):publishComment(item.reply)"
                  >发送</a-button>
                  <a-button
                    v-if="item.commentInfo"
                    size="small"
                    style="margin-top:10px;"
                    @click="cancelComment(index)"
                  >取消</a-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width:620px;margin-top:20px;" v-else>
          <a-table
            :columns="columns"
            :dataSource="studentData"
            class="user_management_table"
            style="border:1px solid #e8e8e8;"
            :pagination="false"
          >
            <span slot="type" slot-scope="text,record">
              <span
                :style="{color:record.is_read==2?'rgb(236, 75, 53)':''}"
              >{{record.is_read==2?'未读':'已读'}}</span>
            </span>
          </a-table>
        </div>
        <preview-image ref="preview"></preview-image>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { homeworkInfo, homeworkReadStudent, reply, delCom, homeworkDel } from '@/api/homework'
import topNavBar from '@/components/topNavBar/topNavBar'
import { inportantUser } from '@/core/icons'
import previewImage from '@/components/previewImg'
export default {
  components: { topNavBar, inportantUser, previewImage },

  data() {
    return {
      loading: false,
      nowRouteTitle: null,
      inportantUser,
      tabName: 'a',
      infomation: {
        title_text: '',
        deadline: '',
        class_name: '',
        can_delete: 0,
        teacher_name: null
      },
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'student_name'
        },
        {
          title: '是否已读',
          dataIndex: 'is_read',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '手机号码',
          dataIndex: 'student_phone'
        }
      ],
      studentData: [],
      comments: null,
      previewVisible: false,
      previewImage: null,
      imgArr: [],
      imgIndex: null
    }
  },
  created() {
    this.nowRouteTitle = this.$route.meta.title
    this.alreadySubmit()
    this.noSubmit()
    this.getInfoList()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    showImg(data, index) {
      this.$refs.preview.showImg(data, index)
    },
    del() {
      let that = this
      this.$confirm({
        title: '确定要删除作业吗?',
        content: '删除后学员提交的作业也会一并删除，且数据无法恢复。确定删除吗？',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          homeworkDel(
            {
              school_id: that.$store.state.user.school
            },
            that.$route.query.id
          )
            .then(res => {
              that.$message.success('删除成功')
              that.back()
            })
            .catch(err => {
              that.$message.error('删除失败')
            })
        },
        onCancel() {}
      })
    },
    checkEnter(str){
      str=str.replace(/\r\n/g,"<br>")
		  str=str.replace(/\n/g,"<br>"); 
      return str
    },
    getInfoList() {
      this.loading = true
      homeworkInfo(this.$route.query.id)
        .then(res => {
          this.infomation = res
          if(this.infomation.content.length>0){
            this.infomation.content.forEach(item=>{
              if(item.type=='text'){
                 item.content=this.checkEnter(item.content)
                }
            })
          }
          
        })
        .finally(() => {
          this.loading = false
        })
        .catch(err => {
          this.$message.error(err.data.message || '作业详情获取失败')
        })
    },
    noSubmit() {
      homeworkReadStudent({ is_submit: 2 }, this.$route.query.id).then(res => {
        this.studentData = res
      })
    },
    alreadySubmit() {
      this.loading = true
      homeworkReadStudent({ is_submit: 1 }, this.$route.query.id)
        .then(res => {
          let params = JSON.parse(JSON.stringify(res))
          params.forEach(val => {
            val.reply = {
              project_id: val.id,
              project_type: 3,
              school_id: this.$store.state.user.school,
              comment: undefined,
              to_type: undefined,
              to_id: undefined
            }
          })
          this.comments = params
        })
        .finally(() => {
          this.loading = false
        })
    },
    publishComment(data) {
      this.loading = true
      reply(data)
        .then(res => {
          this.$message.success('发布成功')
          this.alreadySubmit()
          this.noSubmit()
          this.getInfoList()
        })
        .catch(err => {
          this.$message.error(err.data.message || '发布失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    changeTab(e) {
      if (e.target.value == 'a') {
        this.alreadySubmit()
      } else {
        this.noSubmit()
      }
    },
    replyComment(index, data) {
      this.comments[index].commentInfo = data
      this.$forceUpdate()
    },
    cancelComment(index) {
      this.comments[index].commentInfo = null
      this.$forceUpdate()
    },
    addReply(data, text, id) {
      this.loading = true
      let params = new Object()
      params.to_id = data.id
      params.to_type = data.user_type
      params.comment = text
      params.project_id = id
      params.project_type = 3
      params.school_id = this.$store.state.user.school
      reply(params)
        .then(res => {
          this.alreadySubmit()
        })
        .catch(err => {
          this.loading = false
          this.$message.error('评论失败')
        })
    },
    delComment(e) {
      this.loading = true
      delCom(e)
        .then(res => {
          this.alreadySubmit()
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.data.message || '删除失败')
        })
    }
  },
  watch: {
    tabName(val) {
      if (val == 'a') {
        this.alreadySubmit()
      } else {
        this.noSubmit()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.picture_video {
  overflow: hidden;
  img,
  video {
    display: inline-block;
    vertical-align: top;
    width: auto;
    max-width: 200px;
    margin-right: 20px;
    margin-top: 10px;
    height: auto;
    overflow: hidden;
  }
}
.homeworkTitle {
  font-size: 16px;
  font-weight: 600;
}
.homeworkTime {
  margin: 8px 0;
}
.homeworkClassAndPublisher {
  .classInfo,
  .publisher {
    margin-right: 10px;
    .icon_ {
      position: relative;
      top: -2px;
    }
    .text_ {
      margin: 0 5px;
      color: #999;
      font-size: 13px;
    }
  }
}

.homeworkContent {
  margin: 16px 0;
  .pic_video {
    display: flex;
    flex-wrap: wrap;
    .homeworkContent_picture_video {
      width: 200px;
      height: 250px;
      margin: 10px 20px;
      margin-left: 0;
      img,
      video {
        width: 200px;
        height: 250px;
        object-fit: cover;
      }
    }
  }
}
.comments {
  padding: 20px 10px;
  border-bottom: 1px dashed #e8e8e8;
  .studentInfo {
    display: flex;
    .left {
      width: 40px;
      height: 40px;
      border: 1px solid #e8e8e8;
      border-radius: 50%;
      margin-right: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
  .content {
    padding: 5px 50px 20px;
    .pic_video {
      display: flex;
      flex-wrap: wrap;
      ._picture_video {
        width: 200px;
        height: 250px;
        margin: 10px 20px;
        margin-left: 0;
        img,
        video {
          width: 200px;
          height: 250px;
          object-fit: cover;
        }
      }
    }
  }
  .teacherComments {
    margin-top: 16px;
    margin: 0 50px;
    padding: 10px;
    background: #f7f8f9;
    border-radius: 4px;
    .commentsInfo {
      .publisher {
        display: flex;
        .left {
          width: 40px;
          height: 40px;
          border: 1px solid #e8e8e8;
          border-radius: 50%;
          margin-right: 10px;
          overflow: hidden;
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    .publishComments {
      padding: 10px;
    }
  }
}
.comments:last-child {
  border-bottom: none;
}
</style>